<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>频道设置</title>
		<style>
			html,
			body,
			.mui-content {
				background-color: #fff;
			}
			
			dl,
			dt,
			dd {
				margin: 0;
				padding: 0;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 62px;
				padding-left: 18px;
				padding-right: 18px;
			}
			
			.mui-content .channels {
				position: relative;
				margin-bottom: 15px;
			}
			
			.channels dl {
				font-size: 0;
				margin-right: -12px;
			}
			
			.channels dl dt {
				padding-bottom: 18px;
				font-size: 15px;
			}
			
			.channels dl dd {
				position: relative;
				display: inline-block;
				width: 75px;
				height: 30px;
				margin-right: 12px;
				margin-bottom: 12px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #ddd;
				font-size: 18px;
				border-radius: 5px;
			}
			
			.channels dl dd .remove-btn {
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(50%, -50%);
				color: #fff;
				background-color: #b5b5b5;
				border-radius: 50%;
			}
			
			.channels .edit {
				position: absolute;
				top: 0;
				right: 0;
			}
			
			.edit .edit-btn {
				padding: 3px;
				font-size: 13px;
				border: 1px solid #159ceb;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav navbar-default">
			<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
			<h1 class="mui-title c-white">频道设置</h1>
		</header>
		<div class="mui-content" id="channelsBody">

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/template.js"></script>
		<script src="../../js/common.js"></script>
		<!-- 频道模板 -->
		<script id="channelsList" type="text/html">
			{{each lmlis as item}} 
				{{if item.value == 0}}
				<div class="channels channels-default">
					<dl id="defaultChannels">
						<dt class="c-blue">当前频道</dt> {{each item.data as value i}} {{if i
						< 6}} <dd class="default" data-id="{{value.id}}">{{value.name}}</dd>
							{{else}}
							<dd class="{{value.className}}" data-id="{{value.id}}">{{value.name}}</dd>
							{{/if}} {{/each}}
					</dl>
					<div class="edit">
						<a class="c-blue edit-btn" id="editBtn" href="javascript:;">编辑</a>
					</div>
				</div>
				{{/if}} 
				{{if item.value == 2}}
					{{if item.data.length != 0}}
						<div class="channels channels-garden js-channnels">
							<dl id="productGarden">
								<dt class="c-blue">点击增加更多的产业园</dt> 
								{{each item.data as value}}
									<dd class="product" data-id="{{value.id}}">{{value.name}}</dd>
								{{/each}}
							</dl>
						</div>
					{{/if}}
				{{/if}} 
				{{if item.value == 1}}
					<div class="channels channels-street js-channnels">
						<dl id="streetOffice">
							<dt class="c-blue">点击增加更多的街道办事处</dt> 
							{{each item.data as value}}
								<dd class="street" data-id="{{value.id}}">{{value.name}}</dd>
							{{/each}}
						</dl>
					</div>
				{{/if}} 
			{{/each}}
		</script>
		<script>
			mui.init({
				gestureConfig: {
					longtap: true, //默认为false
				},
				beforeback: function() {
					var ws = plus.webview.currentWebview().opener();
					var modeFlag = localStorage.getItem("modeFlag");
					if(modeFlag){
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					}
					else{
						plus.navigator.setStatusBarStyle("UIStatusBarStyleDefault");
						plus.navigator.setStatusBarBackground("#fefefe");
					}
					//触发列表界面的自定义事件（update）,从而进行数据刷新
					mui.fire(ws, 'update');
					//返回true，继续页面关闭逻辑
					return true;
				}
			});
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
			});*/
			var editFlag = false;
			//构造函数
			function createObj(arr, name, value) {
				this.data = arr;
				this.name = name;
				this.value = value;
			}

			function createMsg(name, id, className) {
				this.name = name;
				this.id = id;
				this.className = className;
			}
			mui.plusReady(function() {
				var modeFlag = localStorage.getItem("modeFlag");
				if (modeFlag) {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#000");
				} else {
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#159ceb");
				}
				var channels = plus.storage.getItem("channels"); //获取频道
				var channelsHtml = template('channelsList', JSON.parse(channels));
				$("#channelsBody").html(channelsHtml);
				document.getElementById("editBtn").addEventListener("tap", function() {
					if (this.innerText == "编辑") {
						editFlag = true;
						this.innerText = "完成";
						$(this).closest(".channels-default").find("dd").not(".default").append('<a class="remove-btn mui-icon mui-icon-closeempty" href="javascript:;"></a>');
						mui("#defaultChannels").on("tap", ".remove-btn", function() {
							var dd = $(this).closest("dd");
							if (dd.hasClass("product")) {
								dd.appendTo($("#productGarden")).find(".remove-btn").remove();
							}
							if (dd.hasClass("street")) {
								dd.appendTo($("#streetOffice")).find(".remove-btn").remove();
							}
						});
					} else {
						editFlag = false;
						this.innerText = "编辑";
						$(this).closest(".channels").find("dd").not(".default").find(".remove-btn").remove();
						updateChannel();
					}
				});
				//点击其他类别频道添加到默认频道
				mui(".js-channnels").on("tap", "dd", function() {
					if (!editFlag) {
						$(this).appendTo($("#defaultChannels"));
					} else {
						$(this).appendTo($("#defaultChannels")).append('<a class="remove-btn mui-icon mui-icon-closeempty" href="javascript:;"></a>');
					}
					updateChannel();
				});
				//更新频道总数
				function updateChannel() {
					var defaultArr = [];
					var productArr = [];
					var streetArr = [];
					mui("#defaultChannels dd").each(function() {
						var name = $(this).text();
						var id = $(this).attr("data-id");
						var className = $(this).attr("class");
						var defaultMsg = new createMsg(name, id, className);
						defaultArr.push(defaultMsg);
					});
					mui("#productGarden dd").each(function() {
						var name = $(this).text();
						var id = $(this).attr("data-id");
						var className = $(this).attr("class");
						var productMsg = new createMsg(name, id, className);
						productArr.push(productMsg);
					});
					mui("#streetOffice dd").each(function() {
						var name = $(this).text();
						var id = $(this).attr("data-id");
						var className = $(this).attr("class");
						var streetMsg = new createMsg(name, id, className);
						streetArr.push(streetMsg);
					});
					var defaultObj = new createObj(defaultArr, "栏目", 0);
					var productObj = new createObj(productArr, "园区", 2);
					var streetObj = new createObj(streetArr, "街道", 1);
					var data = JSON.parse(plus.storage.getItem("channels"));
					var lmlis = [defaultObj, productObj, streetObj];
					data.lmlis = lmlis;
					plus.storage.setItem("channels", JSON.stringify(data));
				}
			});
		</script>
	</body>

</html>